<script lang="ts" setup>
import {onMounted, reactive, ref} from "vue";
import genTemplateService from "@/service/GenTemplateService.ts";
import GenTemplateGroupVO from "@/domain/vo/GenTemplateGroupVO";
import DataSourceInfoVO from "@/domain/vo/DataSourceInfoVO";
import {useRouter} from "vue-router";
import TmpGroupDialog from "@/views/code-gen/gen-template/TmpGroupDialog.vue";
import GenTemplateFileVO from "@/domain/vo/GenTemplateFileVO";

const router = useRouter();

onMounted(() => {
  //加载数据
  getTabsData();
})

//========================== 列表逻辑 ==========================
const tabsList = reactive(new Array<GenTemplateGroupVO>);

function getTabsData() {
  tabsList.length = 0;
  genTemplateService.groupList()
      .then((res) => {
        res.forEach(item => tabsList.push(GenTemplateGroupVO.createFormObject(item)))
      })
}

function genTemplateFileEdit(genTemplateGroupVO: GenTemplateGroupVO, genTemplateFileVO: GenTemplateFileVO) {
  router.push({
    name: "模板管理列表-编辑",
    query: {
      groupId: genTemplateGroupVO.id,
      groupName: genTemplateGroupVO.groupName,
      tmpId: genTemplateFileVO.id
    }
  })
}

function genTemplateFileDel(genTemplateFileVO: GenTemplateFileVO) {
  genTemplateService.delTmpById([genTemplateFileVO.id]).then(
      (res) => {
        getTabsData();
      }
  )
}

function genTemplateFileAdd(genTemplateGroupVO: GenTemplateGroupVO) {
  router.push({
    name: "模板管理列表-编辑",
    query: {
      groupId: genTemplateGroupVO.id,
      groupName: genTemplateGroupVO.groupName
    }
  })
}

//========================== 信息弹窗 ==========================
const infoDialogVisible = ref(false);
const infoDialogInfoVO = ref(new GenTemplateGroupVO());

function info(item: DataSourceInfoVO) {
  Object.assign(infoDialogInfoVO.value, item)
  infoDialogVisible.value = true;
}

function add() {
  infoDialogInfoVO.value = new GenTemplateGroupVO();
  infoDialogVisible.value = true;
}
</script>
<template>
  <div>
    <el-form>
      <el-form-item>
        <el-button type="primary" @click="add()">新增模板组</el-button>
      </el-form-item>
    </el-form>
    <el-tabs type="border-card">
      <el-tab-pane v-for="item in tabsList">
        <template #label>
          <span class="custom-tabs-label">
          <span>{{ item.groupName }}</span>
          <el-icon @click="info(item)"><Setting/></el-icon>
        </span>
        </template>
        <div class="model-box">
          <div class="model-way m-right15"  @click="genTemplateFileAdd(item)">
            <el-icon class="m-right10"><Plus/></el-icon>
            <div>新增模板</div>
          </div>
          <div class="model-way m-right15"  @click="genTemplateFileAdd(item)">
            <el-icon class="m-right10"><Upload/></el-icon>
            <div>导入模板</div>
          </div>
          <div class="model-way"  @click="genTemplateFileAdd(item)">
            <el-icon class="m-right10"><Download/></el-icon>
            <div>导出模板</div>
          </div>
        </div>
        <div>
          <el-table :data="item.fileList"
                    stripe
                    style="width: 100%">
            <el-table-column
                prop="templateName"
                label="模板名称">
            </el-table-column>
            <el-table-column
                prop="genFileName"
                label="文件名称">
            </el-table-column>
            <el-table-column
                fixed="right"
                label="操作">
              <template #default="scope">
                <el-button @click="genTemplateFileEdit(item,scope.row)" type="text" size="small">编辑</el-button>
                <el-button @click="genTemplateFileDel(scope.row)" type="text" size="small">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
    </el-tabs>
    <tmp-group-dialog
        :dialog-visible="infoDialogVisible"
        :gen-template-group-form-b-o="infoDialogInfoVO"
        @close-after="infoDialogVisible = false"
        @save-after="getTabsData"/>
  </div>
</template>
<style lang="scss" scoped>

.model-box{
  display: flex;
  align-items: center;
  color: #2d8cf0;
  padding: 10px 0px;
  .model-way{
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
}
.m-right10{
  margin-right: 10px;
}
.m-right15{
  margin-right: 15px;
}
</style>